<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>游戏列表 - Steam游戏商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 自定义样式 */
        body {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }

        .sidebar {
            background-color: #232323;
            border-right: 1px solid #333;
            height: 100vh;
            position: sticky;
            top: 0;
        }

        .sidebar-header {
            background-color: #161616;
            padding: 15px 20px;
            border-bottom: 1px solid #333;
        }

        .sidebar-title {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
        }

        .category-list {
            padding: 0;
            list-style: none;
        }

        .category-list li {
            margin: 0;
            border-bottom: 1px solid #333;
        }

        .category-list li:last-child {
            border-bottom: none;
        }

        .category-list a {
            display: block;
            padding: 12px 20px;
            color: #e0e0e0;
            text-decoration: none;
            transition: all 0.3s;
        }

        .category-list a:hover {
            background-color: #333;
            color: #4ecdc4;
        }

        /* 激活状态样式 - 加深效果 */
        .category-list a.active {
            background-color: #3a3a3a; /* 比悬停状态更深的背景色 */
            color: #4ecdc4;
            border-left: 3px solid #4ecdc4; /* 添加左侧高亮边框 */
            font-weight: 500;
        }

        .main-content {
            padding: 20px;
        }

        .search-box {
            margin-bottom: 30px;
        }

        /* 游戏卡片水平布局 */
        .game-card {
            display: flex;
            flex-direction: row;
            background-color: #232323;
            border-radius: 5px;
            overflow: hidden;
            transition: all 0.3s;
            margin-bottom: 20px;
        }

        .game-card:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

        .game-image {
            width: 180px;
            height: 100%;
            object-fit: cover;
        }

        .game-info {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .btn-primary {
            background-color: #4ecdc4;
            border-color: #4ecdc4;
        }

        .btn-primary:hover {
            background-color: #38a3a5;
            border-color: #38a3a5;
        }

        .btn-success {
            background-color: #78c2ad;
            border-color: #78c2ad;
        }

        .btn-success:hover {
            background-color: #62a696;
            border-color: #62a696;
        }

        .pagination .page-link {
            color: #e0e0e0;
            background-color: #232323;
            border-color: #333;
        }

        .pagination .page-link:hover {
            background-color: #333;
            color: #4ecdc4;
        }

        .pagination .page-item.active .page-link {
            background-color: #4ecdc4;
            border-color: #4ecdc4;
            color: #1a1a1a;
        }

        .footer {
            background-color: #161616;
            padding: 20px 0;
            margin-top: 40px;
            border-top: 1px solid #333;
        }
    </style>
</head>
<body>
<!-- 头部导航，使用thymeleaf模板引入 -->
<div th:replace="~{fragments/header}"></div>

<div class="container-fluid">
    <div class="row">
        <!-- 侧边导航栏 -->
        <div class="col-md-3 sidebar">
            <div class="sidebar-header">
                <h3 class="sidebar-title"><i class="fas fa-tags mr-2"></i>游戏分类</h3>
            </div>
            <ul class="category-list">
                <li><a th:href="@{/games}" class="active"><i class="fas fa-gamepad mr-2"></i>全部游戏</a></li>
                <li><a th:href="@{/games/category/Action}"><i class="fas fa-fist-raised mr-2"></i>动作游戏</a></li>
                <li><a th:href="@{/games/category/RPG}"><i class="fas fa-user-friends mr-2"></i>角色扮演游戏</a></li>
                <li><a th:href="@{/games/category/Simulation}"><i class="fas fa-cogs mr-2"></i>模拟游戏</a></li>
                <li><a th:href="@{/games/category/FPS}"><i class="fas fa-gun mr-2"></i>第一人称射击游戏（FPS）</a></li>
                <li><a th:href="@{/games/category/TPS}"><i class="fas fa-users mr-2"></i>第三人称射击游戏（TPS）</a></li>
                <li><a th:href="@{/games/category/Sandbox}"><i class="fas fa-box-open mr-2"></i>沙盒游戏</a></li>
                <li><a th:href="@{/games/category/BattleRoyale}"><i class="fas fa-trophy mr-2"></i>大逃杀游戏</a></li>
            </ul>

            <!-- 筛选选项 -->
            <div class="p-4 mt-4">
                <h4 class="text-white mb-3"><i class="fas fa-filter mr-2"></i>筛选条件</h4>
                <div class="form-group">
                    <label for="price-range">价格范围</label>
                    <div class="input-group">
                        <input type="number" class="form-control bg-dark text-white" placeholder="最低">
                        <span class="input-group-text">-</span>
                        <input type="number" class="form-control bg-dark text-white" placeholder="最高">
                    </div>
                </div>
                <div class="form-group">
                    <label>排序方式</label>
                    <select class="form-control bg-dark text-white">
                        <option>推荐排序</option>
                        <option>价格从低到高</option>
                        <option>价格从高到低</option>
                        <option>最新上架</option>
                    </select>
                </div>
                <button class="btn btn-primary btn-block mt-3">应用筛选</button>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="col-md-9 main-content">
            <!-- 搜索框 -->
            <div class="search-box">
                <div class="col-md-8 offset-md-2">
                    <form th:action="@{/games}" method="get" class="form-inline justify-content-center">
                        <div class="input-group w-100">
                            <input type="text" class="form-control bg-dark text-white border-0" name="keyword" th:value="${keyword}" placeholder="搜索游戏名称...">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search mr-2"></i>搜索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <h1 class="mb-4">游戏列表</h1>

            <!-- 游戏卡片列表 - 水平布局 -->
            <div class="game-list" th:each="game : ${games}">
                <div class="game-card">
                    <img th:src="${game.imageUrl}" class="game-image" alt="Game Image">
                    <div class="game-info">
                        <div>
                            <h5 class="text-white font-weight-bold mb-1" th:text="${game.name}"></h5>
                            <p class="text-muted text-sm" th:text="${game.description ?: '暂无游戏描述'}"></p>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="text-success font-weight-bold mb-0" th:text="${'¥' + #numbers.formatDecimal(game.price, 1, 2)}"></p>
                                <span class="text-xs bg-secondary px-2 py-1 rounded">
                                    <i class="far fa-star text-yellow-500 mr-1"></i>4.8
                                </span>
                            </div>
                            <div class="d-flex space-x-2">
                                <a th:href="@{/game/{id}(id=${game.id})}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-eye mr-1"></i>查看详情
                                </a>
                                <form style="display: inline-block;" th:action="@{/cart/add/{gameId}(gameId=${game.id})}" method="post">
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="fas fa-shopping-cart mr-1"></i>加入购物车
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页导航 -->
            <nav aria-label="Page navigation" class="mt-5">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 0}? 'disabled'">
                        <a class="page-link" th:href="@{/games(keyword=${keyword}, page=${currentPage - 1})}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item" th:each="pageNumber : ${#numbers.sequence(0, totalPages - 1)}" th:classappend="${pageNumber == currentPage}? 'active'">
                        <a class="page-link" th:href="@{/games(keyword=${keyword}, page=${pageNumber})}">
                            <span th:text="${pageNumber + 1}"></span>
                        </a>
                    </li>
                    <li class="page-item" th:classappend="${currentPage == totalPages - 1}? 'disabled'">
                        <a class="page-link" th:href="@{/games(keyword=${keyword}, page=${currentPage + 1})}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 页脚，使用thymeleaf模板引入 -->
<div th:replace="~{fragments/footer}" class="footer"></div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    // 侧边栏分类激活状态切换
    $(document).ready(function() {
        // 初始化：根据当前URL设置激活项
        const currentPath = window.location.pathname;
        $('.category-list a').each(function() {
            const linkPath = $(this).attr('href');
            // 移除所有默认的激活状态
            $(this).removeClass('active');
            // 只在路径完全匹配时设置激活状态
            if (currentPath === linkPath) {
                $(this).addClass('active');
            }
        });

        // 点击事件处理
        $('.category-list a').click(function(e) {
            e.preventDefault();

            // 移除所有激活状态
            $('.category-list a').removeClass('active');

            // 为当前点击项添加激活状态
            $(this).addClass('active');

            // 跳转到链接
            window.location.href = $(this).attr('href');
        });

        // 游戏卡片悬停效果
        $('.game-card').hover(
            function() {
                $(this).css('transform', 'translateX(5px)');
                $(this).css('box-shadow', '0 10px 20px rgba(0,0,0,0.3)');
                $(this).css('transition', 'all 0.3s');
            },
            function() {
                $(this).css('transform', 'translateX(0)');
                $(this).css('box-shadow', 'none');
            }
        );
    });
</script>
</body>
</html>